<template>
  <div>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        size="small"
        class="add-btn"
        icon="el-icon-plus"
        v-if="$hasMethod('#add')"
        @click="$router.push({name: 'goodsMeal', params: {goodsId, pact_type}})"
      >添加套餐</el-button>
    </div>
    <el-divider></el-divider>
    <el-table
      :data="tableData"
      border
      v-show="tableData.length > -1"
    >
      <el-table-column
        align="center"
        prop="title"
        label="套餐名称"
        width="300"
      />
      <el-table-column
        align="center"
        prop="lease_set"
        label="租期设置"
      />
      <el-table-column
        align="center"
        prop="is_huabei"
        label="花呗分期"
      />
      <el-table-column
        align="center"
        prop="quantity"
        label="数量"
      />
      <el-table-column
        align="center"
        prop="foregift"
        label="押金"
      />
      <el-table-column
        align="center"
        prop="is_buy_out"
        label="是否买断"
      />
      <el-table-column
        align="center"
        prop="price"
        label="官网价格"
      />
      <el-table-column
          align="center"
          prop="buyout_amount"
          label="买断价"
        />
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            v-if="$hasMethod('#edit')"
            type="primary"
            size="mini"
            @click="$router.push({name: 'goodsMeal', params: {goodsId, pact_type, mealId:scope.row.id}})"
          >编辑</el-button>
          <el-button
            v-if="$hasMethod('#delete')"
            type="danger"
            size="mini"
            @click="handleDelete(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottomBtn">
      <el-button
        class="blue_border"
        @click="$router.go(-1)"
      >返回</el-button>
    </div>
  </div>
</template>

<script>
import customPage from "@/components/customPage";
import { getGoodsSetmealList, deleteGoodsSetmeal } from "@/api/goods";
export default {
  components: { customPage },
  props: ['goodsId'],
  data() {
    return {
      tableData: [],
      goodsName: "",
      pact_type: ''
    }
  },
  methods: {
    // 删除
    handleDelete(id) {
      this.$confirm('您确定要删除该套餐信息吗？', '删除套餐信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        deleteGoodsSetmeal({ goods_id: this.goodsId, setmeal_id: id }).then(res => {
          this.getList();
        });
      });
    },
    getList() {
      getGoodsSetmealList(this.goodsId).then(res => {
        this.goodsName = res.goods_name;
        this.pact_type = res.pact_type;
        this.tableData = res.setmeal || [];
        this.$route.meta.title = this.goodsName + '的套餐信息';
      })
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
.goods_info {
  .info {
    margin-left: 10px;
    p {
      color: #666666;
    }
    p:first-child {
      color: #999999;
    }
  }
}
.bottomBtn {
  height: 60px;
  line-height: 70px;
  background: #ffffff;
  box-shadow: 0px -1px 0px 0px #eeeeee;
  text-align: center;
  margin-top: 50px;
}
</style>
